<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>『海天一色』</title>
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/default/easyui.css" />
<link rel="stylesheet" type="text/css" href="jquery-easyui-1.3.4/themes/icon.css" />
<script type="text/javascript" language="javascript" src="jquery-easyui-1.3.4/jquery.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-easyui-1.3.4/jquery.easyui.min.js"></script>
<script type="text/javascript" language="javascript" src="jquery-easyui-1.3.4/locale/easyui-lang-zh_CN.js"></script>
<!-- <script type="text/javascript" language="javascript" src="http://192.168.0.116:88/docs/js/remote.js"></script> -->
<script type="text/javascript">
var testJson = [[{"Mvalue":"元旦","Mkey":0101},{"Mvalue":"春节","Mkey":0102}],[{"Mvalue":"晴","Mkey":0201},{"Mvalue":"阴","Mkey":0202}],[{"Mvalue":"部长","Mkey":0301},{"Mvalue":"副部长","Mkey":0302}]];
var mbJson = [[{"id":"00101","text":"涓€杞﹂亾"},{"id":"00102","text":"浜岃溅閬 "},{"id":"00103","text":"涓夎溅閬 "},{"id":"00104","text":"鍥涜溅閬 "},{"id":"00105","text":"搴旀€ヨ溅閬 "}],[{"id":"00201","text":"涓婅"},{"id":"00202","text":"涓嬭"}]];	
	$(function(){
		$("#btnTest").click(function(){
			alert(testJson[0][0].Mvalue);
			$("#testCombobox").combobox({
				onLoadSuccess : function(){
					alert("加载完毕了，准备赋值！");
					$("#testCombobox").combobox("setValue","00102");
				}
			}).combobox("loadData",mbJson[0]);
		});
		$("#btn").click(function(){
			if($("#index-tabs").tabs("exists","我的面板")){
				$("#index-tabs").tabs("select","我的面板");
			}else{
				$("#index-tabs").tabs('add',{
					title:'我的面板',   
				    content:'内容',
				    iconCls : "icon-help",
				    closable:true  
				});
			}
		});
		$("#btnChangeCombobox").click(function(){
			$("#cc").combobox("setValues",[3,4]);
		});
		$("#btnGetCombobox").click(function(){
			var v = $("#cc").combobox("getText");
			alert(v);
		});
		$("#btnCallback").click(function(){
			$.ajax({
	             type: "get",
	             async: false,
	             url: "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998",
	             dataType: "jsonp",
	             jsonp: "callback",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(一般默认为:callback)
	             jsonpCallback:"flightHandler",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名，也可以写"?"，jQuery会自动为你处理数据
	             success: function(json){
	                 alert('您查询到航班信息：票价： ' + json.price + ' 元，余票： ' + json.tickets + ' 张。');
	             },
	             error: function(){
	                 alert('fail');
	             }
	         });
		});
	});
</script>
<link>
</head>
<body id="container-layout" class="easyui-layout">
	<div data-options="region:'north',border:false" style="height:80px">
		<h3>管理程序</h3><input type="button" value="隐藏" onclick="javascript:$('#container-layout').layout('remove','north')" />
	</div>
	<div data-options="region:'west',title:'管理操作区',border:true,split:true,iconCls:'icon-add'" style="width:170px">
		
		<div id="aa" class="easyui-accordion" fit="true" border="false" style="border-top:0px;border-left:0px;border-bottom:0px;">  
		    <div title="Title1" data-options="iconCls:'icon-save'" style="overflow:auto;padding:10px;">  
		        <h3 style="color:#0099FF;">Accordion for jQuery</h3>  
		        <p>Accordion is a part of easyui framework for jQuery.    
		        It lets you define your accordion component on web page more easily.</p>  
		    </div> 
		     
		    <div title="Title2" data-options="iconCls:'icon-reload',selected:true" style="padding:10px;">  
		        <ul class="easyui-tree">
					<li>
						<span>My Documents</span>
						<ul>
							<li data-options="state:'closed'">
								<span>Photos</span>
								<ul>
									<li>
										<span>Friend</span>
									</li>
									<li>
										<span>Wife</span>
									</li>
									<li>
										<span>Company</span>
									</li>
								</ul>
							</li>
							<li>
								<span>Program Files</span>
								<ul>
									<li>Intel</li>
									<li>Java</li>
									<li>Microsoft Office</li>
									<li>Games</li>
								</ul>
							</li>
							<li>index.html</li>
							<li>about.html</li>
							<li>welcome.html</li>
						</ul>
					</li>
				</ul>
		    </div>  
		    
		    <div title="Title3" border="false">  
		        <a id="btn" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search',plain:true">按钮</a>
		        <a id="btnChangeCombobox" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">加载下拉值</a>
		         <a id="btnGetCombobox" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">获取下拉值</a>
		         <a id="btnCallback" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-help',plain:true">JSONP</a>
		           
		    </div>  
		</div>
		
	</div>
	
	<div data-options="region:'center',border:true">
		<div id="index-tabs" class="easyui-tabs" data-options="fit:true,border:false">
			<div data-options="title:'关　于'">
				<input id="dd" type="text" class="easyui-datebox" required="required"></input>
				<input id="cc" class="easyui-combobox" name="dept" data-options="panelHeight:'auto',multiple:true,valueField:'id',textField:'text',url:'server/combojson.json'" />
			</div>
			<div title="数据网格">
				<table class="easyui-datagrid" fit="true" border="false" pagination="true" rownumbers="true" striped="true" fitColumns="true">  
				    <thead>  
				        <tr>  
				            <th data-options="field:'code',width:33">Code</th>  
				            <th data-options="field:'name',width:33">Name</th>  
				            <th data-options="field:'price',width:33">Price</th>  
				        </tr>  
				    </thead>  
				    <tbody>  
				        <tr>  
				            <td>001</td><td>name1</td><td>2323</td>  
				        </tr>  
				        <tr>  
				            <td>002</td><td>name2</td><td>4612</td>  
				        </tr>  
				    </tbody>  
				</table> 
			</div>
			<div data-options="title:'测试'" style="padding:5px">
				<select id="testCombobox" class="easyui-combobox" data-options="valueField:'id',textField:'text'" name="test" style="width:200px;"></select>
				<a id="btnTest" href="javascript:void(0)" class="easyui-linkbutton" data-options="iconCls:'icon-search'">测试下拉</a>
			</div>
		</div>
	</div>
	
	<div data-options="region:'south',border:true"style="height:30px;margin:5px 0px;line-height: 25px;text-align: center;">
		Copyright © 2001 - 2013 imyy.org. All Rights Reserved
	</div>
</body>
</html>